<template>
  <div class="personal-info-container">
    <div class="title">
      <h1 style="color: black">个人信息</h1>
    </div>
    <!-- 头像区域 -->
    <div class="content-m">
      <div class="avatar-section">
        <img :src="`${this.baseUrl}/file/getPortrait/${user.username}`" alt="头像" class="avatar"
          @click="go_page('/ptt')">
        <input type="file" ref="avatarInput" style="display: none" @change="handleAvatarUpload">
      </div>
      <!-- 信息展示区域 -->
      <div class="info-section">
        <div class="info-item">
          <span class="label">账号：</span>
          <span class="value">{{ user.username }}</span>
        </div>
        <div class="info-item">
          <span class="label">昵称：</span>
          <span class="value">{{ user.petName }}</span>
          <img src="../../assets/inl.png" alt="" @click="go_page('/updateUser')">
        </div>

        <div class="info-item">
          <span class="label">邮箱：</span>
          <span class="value">{{ user.email }}</span>
          <img src="../../assets/inl.png" alt="" @click="go_page('/updateUser')">
        </div>
        <div class="info-item">
          <span class="label">电话：</span>
          <span class="value">{{ user.phone }}</span>
          <img src="../../assets/inl.png" alt="" @click="go_page('/updateUser')">
        </div>
        <div class="info-item">
          <span class="label">性别：</span>
          <span class="value">{{ user.gender }}</span>
          <img src="../../assets/inl.png" alt="" @click="go_page('/updateUser')">
        </div>
        <div class="info-item">
          <span class="label">年龄：</span>
          <span class="value">{{ user.age }}</span>
          <img src="../../assets/inl.png" alt="" @click="go_page('/updateUser')">
        </div>
        <div class="info-item">
          <div class="label">地址：</div>
          <div style="width: 60vw;" class="value">{{ address }}</div>
          <img src="../../assets/inl.png" alt="" @click="go_page('/address')">
        </div>
      </div>
      <div class="logout">
        <div class="but" @click="logout">退出登录</div>
      </div>
    </div>
    <!-- 头像上传模态框 -->
    <div class="avatar-upload-modal" v-if="showAvatarUpload">
      <div class="modal-content">
        <p>选择新的头像文件后点击确认上传。</p>
        <button @click="confirmAvatarUpload">确认上传</button>
        <button @click="cancelAvatarUpload">取消</button>
      </div>
    </div>
    <!-- <div class="view">
      <router-view v-slot="{ Component }">
        <transition name="fade">
          <component :is="Component" />
        </transition>
      </router-view>
    </div> -->
  </div>
</template>

<script>
import settings from '../../settings.json'
import emitter from '../../bus/index.js'
import bgc from '../../assets/bgc/chatu.png'
import { setStatusBarColor } from "tauri-plugin-status-bar-color-api";
export default {
  data() {
    return {
      baseUrl: '',
      avatarUrl: bgc, // 假设默认头像路径，可替换
      nickname: '示例昵称',
      account: 'example_account',
      email: 'example@example.com',
      phone: '1234567890',
      gender: '男',
      age: 25,
      address: '示例地址',
      showAvatarUpload: false,
      isShowChild: 0,
      user: null
    };
  },
  created() {
    setStatusBarColor('#ffffff')
    let adr = JSON.parse(localStorage.getItem("currentAddress"))
    if(adr == null){
      adr = {
        shen: "请选择",
        shi: "请选择",
        xian: "请选择",
        street: "请选择"
      }
    }
    this.address = adr.shen + "-" + adr.shi + "-" + adr.xian + "-" + adr.street
    this.baseUrl = settings.ipAddress
    this.user = JSON.parse(localStorage.getItem("currentUser"))
    emitter.on('showMine', (e) => {
      this.isShowChild = 0
      let adr = JSON.parse(localStorage.getItem("currentAddress"))
      this.address = adr.shen + "-" + adr.shi + "-" + adr.xian
    })
  },
  methods: {
    logout() {
      // localStorage.removeItem("currentUser")
      this.$router.push('/login')
    },
    notShow() {
      this.isShowChild = 0
    },
    // 处理头像上传选择文件
    handleAvatarUpload(event) {
      const file = event.target.files[0];
      if (file) {
        this.avatarUrl = URL.createObjectURL(file);
      }
    },
    // 确认上传头像（实际应用需完善）
    confirmAvatarUpload() {
      this.showAvatarUpload = false;
    },
    // 取消上传头像
    cancelAvatarUpload() {
      this.showAvatarUpload = false;
      this.$refs.avatarInput.value = null;
    },
    go_page(r) {
      this.isShowChild = 1
      this.$router.push(r)
    }
  }
};
</script>

<style lang="scss" scoped>
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

// 整体容器样式，设置背景色、内边距、圆角、宽度及水平居中
.personal-info-container {
  position: fixed;
  background-color: #ffffff; // 清新绿色
  // padding: 1rem;
  width: 100vw;
  height: 100vh;

  .title {
    position: fixed;
    width: 100vw;
    top: 0;
    height: 69px;
    text-align: center;
    background-color: #ffffff;
    border-bottom: 1px solid #d3d3d3;
    font-weight: bold;
  }

  // 头像区域样式，头像居中，设置尺寸、圆角及点击效果
  .content-m {
    background-color: #ffffff;
    position: fixed;
    top: 70px;
    width: 100vw;
    height: calc(100vh - 130px);

    .avatar-section {
      margin-top: 6vh;
      text-align: center;
      margin-bottom: 1rem;

      .avatar {
        width: 8rem;
        height: 8rem;
        border-radius: 50%;
        object-fit: cover;
        cursor: pointer;
      }
    }

    .logout {
      width: 50vw;
      background-color: #5b6983;
      height: 30px;
      text-align: center;
      line-height: 30px;
      border-radius: 16px;
      margin-left: 25vw;
      color: #ffffff;
      margin-top: 1vh;
    
    }

    // 信息展示区域样式，使用flex布局，信息项排列并添加底部边框
    .info-section {
      display: flex;
      flex-direction: column;

      .info-item {
        display: flex;
        justify-content: start;
        align-items: center;
        margin-bottom: 0.8rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #aed581; // 较浅的绿色分割线

        .label {
          margin-left: 5vw;
          font-weight: bold;
          font-size: 0.9rem;
        }

        .value {
          margin-left: 5vw;
          font-size: 0.9rem;
        }

        img {
          width: 1.5rem;
          height: 1.5rem;
          position: absolute;
          right: 1rem;
        }
      }
    }
  }

  // 头像上传模态框样式，固定定位铺满屏幕，内容居中显示
  .avatar-upload-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;

    .modal-content {
      background-color: white;
      padding: 1.5rem;
      border-radius: 6px;
      text-align: center;
      width: 80%;
      max-width: 300px;

      button {
        margin-top: 1rem;
        padding: 0.5rem 1rem;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        background-color: #c5e1a5;
        color: white;
        font-size: 0.9rem;

        &:hover {
          background-color: #aed581;
        }
      }
    }
  }
}
</style>
